<template>
    <!--顶部组件 start-->
    <TopHeader/>
    <!--顶部组件 end--> 
    <!--搜索组件 start-->
    <div class="edu-lesson-nav">
      <Search/>
    </div>
    <!--搜索组件 end-->
    
    
  <!--中间内容 start-->
  <div class="edu-container edu-data">
    <el-card class="edu-data-intro">
      <template #header>
        <div class="edu-card-header">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{path: '/index'}">首页</el-breadcrumb-item>
            <!-- <el-breadcrumb-item :to="{path: '/edu/list',query: {teacherId:lessonInfo.teacherId}}">
              {{lessonInfo.eduTeacher!=null?lessonInfo.eduTeacher.teacherName:'酒店1楼'}}
            </el-breadcrumb-item> -->
            <el-breadcrumb-item>课程详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
  
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="intro-img photos">
            <img id="lessonImg" :src="url+'uploadFile/'+lessonInfo.lessonImg" alt="lessonInfo.lessonName">
          </div>
        </el-col>
  
        <el-col :span="12">
          <div class="intro-txt">
            <h1 class="title">{{lessonInfo.lessonName}}</h1>
            <div class="store-attrs">
              <div class="summary">
                <p class="reference"><span>课程id号</span><span>{{lessonInfo.lessonNumber}}</span></p>
                <!-- <p class="reference"><span>标准价</span>￥<span>{{lessonInfo.lessonPrice}}</span></p> -->
                <!-- <p class="reference"><span>教师</span><span>{{lessonInfo.eduTeacher.teacherName}}</span></p> -->

              </div>
            </div>
  
            <p class="store-detail-active">
              <el-button @click="reserveLesson(lessonInfo.id,lessonInfo.lessonNumber)" color="#FF9434"
              style="width: 200px;line-height: 52px;font-size: 18px;height: 52px;color: white;">
                <el-icon size="32" class="edu-icon"><Stopwatch /></el-icon>
                立即观看
              </el-button>
            </p>
  
  
          </div>
        </el-col>
  
      </el-row>
  
    </el-card>
  
  </div>
    <!--中间内容 end-->
    <!-- 列表 -->



    <!-- 详情列表 start-->
    <el-row class="tac">
    <el-col >
      <p class="reference"><span>课程详情</span><span>{{lessonInfo. courseDesc}}</span></p>

     
    </el-col>
    
  </el-row>


  <!-- 详情列表 end-->
    <!--底部组件 start-->
    <Footer/>
    <!--底部组件 end-->
  </template>
<script setup lang="ts">

import Search from "@/views/edu/comm/Search.vue"
import TopHeader from "@/views/edu/comm/TopHeader.vue"
import Footer from "@/views/edu/comm/Footer.vue"
import {ref,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {getLessonDetailApi} from "@/api/edu/details/details"
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
 // 服务器路径
 const url = import.meta.env.VITE_APP_BASE_API
// 路由对象
const router = useRouter()
const route = useRoute()
// 课程ID
const lessonId:any = route.params.id
// 课程信息
const lessonInfo = ref('')
// 获取课程详情
const getLessonDetail = async ()=> {
  const { data } = await getLessonDetailApi(lessonId)
  lessonInfo.value = data.result
}
onMounted(()=> {
  getLessonDetail()
})
</script>
<style scoped>
.edu-lesson-nav {
  background-color: #fff;
}
.edu-container {
 
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
}

.edu-data-intro {
  margin: 30px 0;
  background-color: #fff;
}
.edu-data-intro .intro-img {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 268px;
  text-align: center;
  background-color: #fbfbfb;
  margin: 15px;
}
.edu-data-intro .intro-img img {
  max-width: 100%;
}

.edu-data-intro .intro-txt {
  padding: 10px;
}

.edu-data-intro .intro-txt .title {
  line-height: 35px;
  padding: 0 0 20px;
  font-size: 32px;
  color: #333;
}

.store-attrs .summary {
  width: 100%;
  /* height: 249px; */
  background: #f5f5f5;
  padding-top: 5px;
}
.store-attrs .summary p {
  line-height: 40px;
  padding-left: 34px;
  color: #888888;

}

.store-attrs .summary p span {
  padding-right: 40px;
}

.store-detail-active {
  padding: 29px 0 20px;
}

.edu-icon {
  margin-right: 9px;
}

.detail-body {
  margin:  20px 0 0;
  min-height: 306px;
  line-height: 26px;
  font-size: 16px;
  color: #333;
  word-wrap: break-word;

}

.edu-elem-quote {
  margin-bottom: 10px;
  padding: 15px;
  line-height: 22px;
  border-left: 5px solid #009688;
  border-radius: 0 2px 2px 0;
  background-color: #F2F2F2;
}

/* 标签 */
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-menu {
  background-color:#f5f5f5 ;
}

</style>
   